<template>
  <el-row :gutter="20">
    <!-- 成交统计 -->
    <el-col :span="12">
      <div class="grid-content bg-purple" id="box1"></div>
    </el-col>
    <!-- 品牌销售额占比 -->
    <el-col :span="3">
      <div class="grid-content bg-purple" id="box2"></div>
    </el-col>
    <!-- 订单量 -->
    <el-col :span="3">
      <div class="grid-content bg-purple" id="box3">
        <!-- 标题 -->
        <p class="DColor">订单量</p>
        <div class="DImg">
          <img src="../../../../assets/shishishuju-imgs/icon06.png" alt="" />
        </div>
        <p>
          <span class="DFont">1.5</span>
          <span class="DFont1">万</span>
        </p>
        <p class="Dadd">较昨日+5%</p>
      </div>
    </el-col>
    <!-- 浏览量 -->
    <el-col :span="3">
      <div class="grid-content bg-purple" id="box4">
        <p class="DColor">浏览量</p>
        <div class="DImg">
          <img src="../../../../assets/shishishuju-imgs/icon07.png" alt="" />
        </div>
        <p>
          <span class="DFont">10</span>
          <span class="DFont1">万</span>
        </p>
        <p class="Dadd">较昨日+10%</p>
      </div>
    </el-col>
    <!-- 代付款 -->
    <el-col :span="3">
      <div class="grid-content bg-purple" id="box5">
        <p class="DColor">待付款</p>
        <div class="DImg">
          <img src="../../../../assets/shishishuju-imgs/icon08.png" alt="" />
        </div>
        <p>
          <span class="DFont">2</span>
          <span class="DFont1">万</span>
        </p>
      </div>
    </el-col>
  </el-row>
  <el-row :gutter="20">
    <!-- 产品销量排行 -->
    <el-col :span="6">
      <div class="grid-content bg-purple" id="langHeight1"></div>
    </el-col>
    <!-- 客单量 -->
    <el-col :span="6">
      <div class="grid-content bg-purple" id="langHeight2"></div>
    </el-col>
    <!-- 当日销售排行 -->
    <el-col :span="12">
      <div class="grid-content bg-purple" id="langHeight3">
        <ul>
          <li class="ShowList">当日销售排行</li>
          <li>
            <p class="Show1">
              <span>商品</span>
              <span>成交金额/元</span>
              <span>排名</span>
              <span>商品单价</span>
            </p>
          </li>
          <li>
            <p class="Show2">
              <span>梳妆台</span>
              <span>2000</span>
              <span>3</span>
              <span>400</span>
            </p>
          </li>
          <li>
            <p class="Show3">
              <span>床</span>
              <span>3000</span>
              <span>1</span>
              <span>1000</span>
            </p>
          </li>
          <li>
            <p class="Show2">
              <span>玄关柜</span>
              <span>1200</span>
              <span>5</span>
              <span>600</span>
            </p>
          </li>
          <li>
            <p class="Show3">
              <span>书桌</span>
              <span>980</span>
              <span>7</span>
              <span>980</span>
            </p>
          </li>
          <li>
            <p class="Show2">
              <span>衣柜</span>
              <span>1300</span>
              <span>4</span>
              <span>650</span>
            </p>
          </li>
          <li>
            <p class="Show3">
              <span>茶几</span>
              <span>1100</span>
              <span>6</span>
              <span>1100</span>
            </p>
          </li>
          <li>
            <p class="Show2">
              <span>沙发</span>
              <span>2300</span>
              <span>2</span>
              <span>2300</span>
            </p>
          </li>
          <li>
            <p class="Show3">
              <span>床头柜</span>
              <span>660</span>
              <span>8</span>
              <span>330</span>
            </p>
          </li>
        </ul>
      </div>
    </el-col>
  </el-row>
</template>

<script lang="ts">
//引入echarts
import * as echarts from 'echarts'
import { onMounted } from 'vue'

export default {
  setup() {
    onMounted(() => {
      //第一行第一个格子
      const box1 = document.getElementById('box1')
      if (box1) {
        var myChart1 = echarts.init(box1)
        // 绘制图表
        myChart1.setOption({
          color: ['#BCBEB9', '#467446', '#5F4E72', '#341A76'],
          title: {
            text: '成交统计',
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'cross',
              label: {
                backgroundColor: '#6a7985',
              },
            },
          },
          legend: {
            data: ['2020年', '2021年', '2022年', '当前月份'],
            top: 'bottom',
            bottom: '60%',
            icon: 'rect',
            itemGap: 10,
            itemWidth: 14, // 设置图例图形的宽
            itemHeight: 14,
            padding: [20, 80, 0, 0],
          },
          toolbox: {
            feature: {
              saveAsImage: {},
            },
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '12%',
            containLabel: true,
          },
          xAxis: [
            {
              type: 'category',
              boundaryGap: false,
              data: [
                '1月',
                '2月',
                '3月',
                '4月',
                '5月',
                '6月',
                '7月',
                '8月',
                '9月',
                '10月',
                '11月',
                '12月',
              ],
            },
          ],
          yAxis: [
            {
              type: 'value',
              axisLabel: {
                formatter: '{value} 万',
              },
            },
          ],
          series: [
            {
              name: '2020年',
              type: 'line',
              // stack: 'Total',
              smooth: true,
              lineStyle: {
                width: 0,
              },
              showSymbol: false,
              areaStyle: {
                opacity: 0.8,
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: '#BCBEB9',
                  },
                  {
                    offset: 1,
                    color: '#BCBEB9',
                  },
                ]),
              },
              emphasis: {
                focus: 'series',
              },
              data: [18, 43, 33, 40, 44, 60, 45, 28, 29, 43, 72, 18],
            },
            {
              name: '2021年',
              type: 'line',

              // stack: 'Total',
              smooth: true,
              lineStyle: {
                width: 0,
              },
              showSymbol: false,
              areaStyle: {
                opacity: 0.8,
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: '#467446',
                  },
                  {
                    offset: 1,
                    color: '#467446',
                  },
                ]),
              },
              emphasis: {
                focus: 'series',
              },
              data: [18, 14, 44, 28, 28, 70, 43, 44, 40, 38, 58, 22],
            },
            {
              name: '2022年',
              type: 'line',
              // stack: 'Total',
              smooth: true,
              lineStyle: {
                width: 0,
              },
              showSymbol: false,
              areaStyle: {
                opacity: 0.8,
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: '#5F4E72',
                  },
                  {
                    offset: 1,
                    color: '#5F4E72',
                  },
                ]),
              },
              emphasis: {
                focus: 'series',
              },
              data: [45, 35, 31, 35, 44, 10],
            },
            {
              name: '当前月份',
              type: 'line',
              // stack: 'Total',
              smooth: true,
              lineStyle: {
                width: 0,
              },
              showSymbol: false,
              areaStyle: {
                opacity: 0.8,
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: '#341A76',
                  },
                  {
                    offset: 1,
                    color: '#341A76',
                  },
                ]),
              },
              emphasis: {
                focus: 'series',
              },
              data: [0, 0, 0, 0, 0, 60],
            },
          ],
        })
      }
      //第一行第二个格子
      const box2 = document.getElementById('box2')
      if (box2) {
        var myChart2 = echarts.init(box2)
        // 绘制图表
        myChart2.setOption({
          color: ['#848492', '#467446', '#1A7176', '#341A76'],
          title: {
            text: '品牌销售额占比',
            left: 'center',
            top: '10%',
            textStyle: {
              fontSize: 10,
            },
          },
          tooltip: {
            trigger: 'item',
          },
          legend: {
            top: 'bottom',
            bottom: '60%',
            itemGap: 10,
            itemWidth: 14, // 设置图例图形的宽
            itemHeight: 14,
          },
          series: [
            {
              name: 'Access From',
              type: 'pie',

              radius: ['50%', '40%'],
              data: [
                { value: 30, name: '30%' },
                { value: 20, name: '20%' },
                { value: 37, name: '37%' },
                { value: 13, name: '13%' },
              ],
              grid: {
                left: '10%',
                right: '4%',
                bottom: '3%',
                containLabel: true,
              },
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)',
                },
              },
            },
          ],
        })
      }
      //第二行第一个格子内容
      const langHeight1 = document.getElementById('langHeight1')
      if (langHeight1) {
        var myChart = echarts.init(langHeight1)
        // 绘制图表
        myChart.setOption({
          xAxis: {
            axisTick: {
              show: false,
            },

            type: 'category',
            data: [
              '梳妆台',
              '床',
              '玄关柜',
              '书桌',
              '衣柜',
              '茶几',
              '沙发',
              '床头柜',
            ],
          },
          yAxis: [
            {
              type: 'value',
              show: false,
            },
          ],
          series: [
            {
              data: [120, 200, 150, 80, 70, 110, 130],
              type: 'bar',
              label: {
                // 柱图头部显示值
                show: true,
                position: 'top',
                color: '#333',
                fontSize: '12px',
                // formatter: (params) => {
                //   return params.value[params.encode.x[0]];
                // },
              },

              // showBackground: true,
              backgroundStyle: {
                color: 'rgba(180, 180, 180, 0.2)',
              },
              arWidth: 10, //柱状宽度
              itemStyle: {
                //柱状颜色和圆角
                color: '#5B468F',
                normal: {
                  show: true, //开启显示
                  //在上方显示
                },
              },
            },
          ],
        })
      }

      //第二行第二个格子
      const langHeight2 = document.getElementById('langHeight2')
      if (langHeight2) {
        var myChart22 = echarts.init(langHeight2)
        // 绘制图表
        myChart22.setOption({
          xAxis: {
            axisTick: {
              show: false,
            },
            type: 'category',
            data: ['5.24', '5.25', '5.26', '5.27', '5.28', '5.29', '5.30'],
          },
          yAxis: {
            type: 'value',
          },
          series: [
            {
              data: [1500, 3300, 2800, 4400, 2700, 3100, 3800],
              type: 'line',
              showSymbol: false, //是否默认展示圆点
              radius: '50%',

              smooth: true,
              itemStyle: {
                //柱状颜色和圆角
                color: '#5B468F',
              },
            },
          ],
        })
      }
      // 基于准备好的dom，初始化echarts实例
    })
  },
}
</script>

<style lang="less" scoped>
//以下样式是自己改的
//第二行销售排行格子
#langHeight3 {
  p {
    display: flex;
    justify-content: space-between;
    line-height: 24px;
  }
  span {
    width: 130px;
    height: 23px;
  }
  .ShowList {
    height: 30px;
    color: #666666;
  }
  .Show1 {
    background: #341a76;
    color: white;
  }
  .Show2 {
    background: white;
  }
}

//其他格子
.DColor {
  color: #666666;
  font-size: 10px;
  padding: 11px 9px;
}
.DImg {
  width: 61px;
  height: 52 px;
  margin-top: 20px;
  margin-left: 20px;
  margin-bottom: 14px;
  img {
    width: 100%;
    height: 100%;
  }
}
.DFont {
  font-size: 40px;
  color: #5f4e72;
  margin-left: 20px;
}
.DFont1 {
  font-size: 16px;
  color: #363636;
  font-weight: 600;
}
.Dadd {
  margin-top: 5px;
  margin-left: 20px;
}
.grid-content[data-v-c5f743fa] {
  border-radius: 4px;
  min-height: 240px;
  background: '#F6F6F6';
}
#langHeight1 #langHeight2 #langHeight3 {
  min-height: 310px;
}

//以下样式是直接粘贴的
.el-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  // background: red;
}
.bg-purple {
  background: #f6f6f6;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
</style>
